<template>
  <section>
    <div class="editor_line_height">
      <vue-ueditor-wrap
        :id="uuid"
        v-model="content"
        :config="myConfig"
        :destroy="true"
      ></vue-ueditor-wrap>
    </div>
  </section>
</template>

<script>
import VueUeditorWrap from "vue-ueditor-wrap";
export default {
  name: "index",
  props: {
    value: String,
    config: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      uuid: "",
      content: "",
      myConfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 500,
        // 初始容器宽度
        initialFrameWidth: "100%",
        enableAutoSave: false,
        // 上传文件接口
        serverUrl: this.$appConf.domain.serverUrl,
        UEDITOR_HOME_URL: "/ueditor/"
      }
    };
  },
  created() {
    this.uuid = Math.random()
      .toString(36)
      .substring(3, 8);
    this.content = this.value;
    this.mergeConfig();
  },
  watch: {
    content(val) {
      this.$emit("input", val);
    },
    value(val) {
      this.content = val;
    }
  },
  methods: {
    mergeConfig() {
      this.myConfig = Object.assign(this.myConfig, this.config);
    }
  },
  components: {
    VueUeditorWrap
  }
};
</script>

<style scoped>
.editor_line_height {
  line-height: 14px;
}
.edui-editor-toolbarbox {
  top: 150px !important;
}
</style>
